<template>
<div id="my_ad" class="pb-180 flex flex-col w-full h-full bg-grey">
  <order-nav :title="$t('我的广告')">
    <template #right>
      <div >
        <img class="w-36 h-36 mr-34" src="@/assets/image/otc/buy/plus.png" alt="" @click="clickAD ">
      </div>
      <div>
        <img class="w-32 h-36" src="@/assets/image/otc/buy/ggbj.png" alt="" @click="AdHistory">
      </div>
    </template>
  </order-nav>
  <div class="border_top">
    <van-dropdown-menu active-color="#1D91FF">
      <van-dropdown-item  v-model="form.symbol" :options="option1" active-color="#ffffff" />
      <van-dropdown-item v-model="form.direction" :options="option2" />
      <van-dropdown-item v-model="form.on_sale" :options="option3" />
    </van-dropdown-menu>
  </div>

  <div style="overflow-y: auto; flex: 1">
    <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
                      v-model="isLoading" @refresh="onRefresh">
      <template v-if="list.length !== 0">
        <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('没有更多了')"
            @load="onLoad">
          <div class="flex-1 w-full bg-grey box-border px-32 py-32 overflow-y ">

            <div  @click="$router.push(  {
              path: '/adDetails',
              query: {
              id: item.id
              }
            })" class="bg-white rounded-xl mb-32 " v-for="(item,index) in list" :key="'AD' + index">
              <div class="flex justify-between items-center px-28 pt-26 ">
                <div>
                  <span :class="item.direction === 'sell' ? 'text-red' : 'text-green'" class="font-400 mr-10">{{item.direction === 'sell' ?  $t('出售') : $t('购买')}}</span>
                  <span class="font-500 font-32 mr-10">{{item.symbol.toUpperCase()}}</span>
                  <span class="font-400 font-32 mr-10">{{$t('用')}}</span>
                  <span class="font-500 font-32">{{item.currency}}</span>
                </div>
                <div class="flex ">
                  <div v-if="!item.on_sale" class="text-grey bg-grey px-12 py-6 font-24" >{{$t('已下架')}}</div>
                  <div v-if="item.on_sale" class="bg-grey px-12 py-6 font-24" :class="{grey : checked }">{{$t('已上架')}}</div>
                  <van-switch class="ml-28" disabled v-model="item.on_sale" size="24" />
                </div>
              </div>
              <div class="px-28 pb-26">
                <div class="mt-34">
                  <span class="font-600 font-32 mr-18">{{ $store.state.home.currency.currency_symbol }}</span>
                  <span class="font-700 font-52">{{item.symbol_value}}</span>
                </div>
                <div class="flex justify-between mt-30">
                  <span class="font-400 font-28 text-grey">{{$t('交易总额')}}</span>
                  <span class="font-600 font-28">{{item.symbol_value * item.coin_amount}} {{item.symbol}}</span>
                </div>
                <div class="flex justify-between mt-30">
                  <span class="font-400 font-28 text-grey">{{$t('限额')}}</span>
                  <span class="font-600 font-28">{{item.investment_min + ' - ' + item.investment_max + ' ' + item.currency}}</span>
                </div>
                <div class="flex justify-between items-center mt-64">
                  <div class="flex items-center">
                    <div class="w-7 h-29 col  mr-9"></div>
                    <span class="mr-19">{{item.pay_type_name}}</span>
                  </div>
                  <img @click="$router.push(item.path)" class="w-44 h-44" src="@/assets/image/otc/buy/Group 2630.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </template>
      <template v-if="list.length === 0 && loading === false && isLoading === false" >
        <div class="mt-160">
          <van-empty
              class="custom-image"
              :image="require('@/assets/image/otc/nodatas.png')"
              :description="$t('暂无广告')"
          >
            <van-button @click="showPopup" round type="danger" square class="bottom-button rounded-xl h-80 w-220 font-500 font-32" color="linear-gradient(275.44deg, #1D92FF 2.13%, #B1DAFF 98.94%)" ></van-button>
          </van-empty>
          <van-popup v-model="show">
            <div class="h-360 w-600 text-center">
              <img src="@/assets/image/otc/buy/advice_icon.png" class="w-76 h-76 mt-46 " alt="">
              <div class="font-28 font-400 mt-36">{{$t('請先申請成為認證廣告方')}}</div>
              <div class="mt-42 mb-48 flex px-50 box-border">
                <div class="h-80 bg-grey flex-1 rounded-lg lh-80 text-center font-28 mr-22" @click="show = false">{{$t('取消')}}</div>
                <div class="h-80 bg-blue flex-1 rounded-lg lh-80 text-center font-28 text-white" @click="$router.push('/CertifiedAdvertiser')">{{$t('去申请')}}</div>
              </div>
            </div>
          </van-popup>
        </div>

      </template>
    </van-pull-refresh>
  </div>
</div>
</template>

<script>
import listLoadMixins from '@/utils/list-load-mixins'
import { Icon, DropdownMenu,Cell, DropdownItem,Switch,Empty,Popup,List,PullRefresh, Toast } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import { getMyadvertList, c2cGetCurrencyList } from '@/API/otc'
export default {
  name: "my_ad",
  mixins: [listLoadMixins],
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Icon.name]: Icon,
    [Switch.name]: Switch,
    [Cell.name]: Cell,
    [Empty.name]: Empty,
    [Popup.name]: Popup,
    [List.name]: List,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    OrderNav,
  },
  data() {
    return {
      show:false,
      value2: 'a',
      value3: 'A',
      checked: false,
      form: {
        direction: '',
        currency: this.$store.state.home.currency.currency,
        symbol: '', // 默认全部
        on_sale: '',
        language: this.$i18n.locale
      },
      option1: [
        { text: this.$t('所有币种'),value: '' },
      ],
      option2: [
        { text: this.$t('所有类型'), value: '' },
        { text: this.$t('购买'), value: 'buy' },
        { text: this.$t('出售'), value: 'sell' },
      ],
      option3: [
        { text: this.$t('所有状态'), value: '' },
        { text: this.$t('上架'), value: 1 },
        { text: this.$t('下架'), value: 0 },
      ],
    };
  },
  created() {
    c2cGetCurrencyList().then((res) => {
      //console.log('上架币种列表', res)
      Object.keys(res).forEach((key) => {
        this.option1.push({
          text: res[key],
          value: key
        })
      })
      this.get()
    })
  },
  methods:{
    get() { // 获取数据的方法需要自定义
      //console.log('正在加载数据')
      Toast.loading()
      getMyadvertList(this.form).then(res => {
        Toast.clear()
        //console.log('我的广告', res)
        res.forEach((item) => {
          item.on_sale === 1 ? item.on_sale = true : item.on_sale = false
        })
        this.handleData(res)
      })
    },
    click () {
      this.checked = !this.checked;
    },
    showPopup() {
      this.show = true;
    },
    clickAD() {
      this.$router.push({
        path: '/editAd',
        query: {
          type: 0
        }
      })
    },
    AdHistory() {
      this.$router.push({
        path: '/advertiserHistory',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#my_ad {
  overflow: hidden;
  box-sizing: border-box;
}
::v-deep{
  .van-empty__bottom {
    margin-top: 53px;
  }
  .van-empty__image {
    width: 186px;
    height: 186px;
  }
}
.border_top {
  border-top: 1px solid #C8CAD2;
}
.grey {
  color: #2C78F8;
}
.col {
  background:#E7BB41;
}
.overflow-y {
  overflow-y: auto;
}


</style>
